<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll">
			<view v-for="item in article" :key="item.articleId">
			   <view class="header">
					<image :src=item.adminAvatar></image>
					<view class="article">
						<view>{{item.adminName}}</view>
						<view>
							{{ new Date(item.articleTime).toDateString()}}
						</view>
					</view>
			   </view>
			   <view class="content">
				   <text>{{item.articleContent}}</text>
			   </view>
			</view>   
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				article: [],
			}
		},
		onLoad() {
		  },
		 mounted() {
		 	//var that=this;
		 	//箭头函数指向是父级this指向
		 	this.getArticle();
		 },
		methods: {
			getArticle: function () {
			    var self = this;  // 缓存this
			    uni.getStorage({
			        key: 'article',
			        success: function (res) {
			            var data = {
			                articleId: res.data
			            };
			            console.log(data.articleId);
			            uni.request({
			                url: "http://localhost:8888/getArticleById",
			                data: data,
			                success: function (res) {
			                    if (res.data.code == 0) {
			                        self.article = res.data.data;
									// self.$forceUpdate();
			                    } else {
			                        uni.showToast({
			                            title: "返回错误"
			                        })
			                    }
			                }
			            });
			        }
			    });
			},
		}
	}
</script>

<style>
.container{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 750rpx;
	height: 1210rpx;
	background-color: rgb(246 245 245);	
}
.scroll{
	height: 1200rpx;
}
.header{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10rpx;
	height: 150rpx;
	width: 680rpx;
	margin-left: 30rpx;
	margin-bottom: 20rpx;
	
}
.article>view{
	height: 50rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.article>view:nth-child(2){
	color:  #90A674;
	font-size: 26rpx;
}
.header>image{
	width: 120rpx;
	height: 120rpx;
	border-radius: 120rpx;	
	margin-right: 20rpx;
	opacity: 0.8;
}
.content{
	/display: flex;
	width: 700rpx;
	margin-left: 30rpx;
	flex-wrap: wrap;
	align-content: flex-start; 
}
</style>
